<template>
	<view>
		<scroll-view scroll-x class="scroll-view_H">
			<view class="scroll-view-item_H">
				<view class="scroll-x mr-30" v-for="(item, index) in list" :index="index"
					@click="$ut.route('pages/store/index',{id: item.id})">
					<view class="font-30 font-bold flex items-center justify-between">
						<view>{{ item.name }}</view>
						<text class="recommended-label">推荐店铺</text>
					</view>
					<view class="img-box flex items-center">
						<template v-for="(items, key) in item.recommendShopCommodityList">
							<view class="img-left" v-if="key == 0" @click="$ut.route('pages/store/index',{id: item.id})">
								<text class="title-text">{{ items.name }}</text>
								<u-image class="img" width="362" height="232" :src="$ut.setImgae(items.image)"></u-image>
							</view>
						</template>
						<view class="img-right">
							<template v-for="(items, key) in item.recommendShopCommodityList">
								<view class="top" v-if="key == 1"
									@click.stop="$ut.route('pages/store/index',{id: item.id, commodityId: items.id, commodityTypeId: items.commodityTypeId})">
									<text class="title-text font-24">{{ items.name }}</text>
									<u-image class="img" width="204" height="110" :src="$ut.setImgae(items.image)"></u-image>
								</view>
								<view class="bottom" v-if="key == 2"
									@click.stop="$ut.route('pages/store/index',{id: item.id, commodityId: items.id, commodityTypeId: items.commodityTypeId})">
									<text class="title-text font-24">{{ items.name }}</text>
									<u-image class="img" width="204" height="110" :src="$ut.setImgae(items.image)"></u-image>
								</view>
							</template>
						</view>
					</view>
					<view class="title-box flex items-center mt-16 mb-10">
						<view class="flex items-center">
							<view class="flex items-center left-box">
								<u-image class="img" width="28" height="28" src="/static/images/recommend_icon.png"></u-image>
								<view class="font-bold">精选</view>
							</view>
							<view class="right-box font-24">精选品质餐厅</view>
						</view>
						<view class="subtitle-box ml-6">近期{{ item.salesVolume }}人就餐</view>
					</view>
					<view class="flex items-center font-24">
						<view class="score">
							<u-icon size="24" name="star-fill"></u-icon>
							<text class="ml-6">{{ item.score || '暂无评分' }}</text>
						</view>
						<view class="ml-12">{{ item.mainBusiness }}</view>
						<view class="ml-12">起送 ¥{{ item.startPrice }}</view>
						<view class="ml-12">配送 ¥{{ item.deliveryPrice }}</view>
					</view>
					<view class="dec line-2">
						<text class="font-26 font-bold">必吃理由:</text>
						<text class="ml-12 font-24" style="color: #666;white-space:pre-wrap">{{ item.introduction }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					[]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-x {
		display: inline-block;
		width: 600rpx;
		height: 518rpx;
		background-image: url('/static/images/recommend_bg.png');
		background-size: 100% 100%;
		border-radius: 24rpx;
		overflow: hidden;
		padding: 16rpx 24rpx;

		.recommended-label {
			background-color: #f0cd6e;
			font-size: 24rpx;
			font-weight: 400;
			padding: 2rpx 8rpx;
			border-top-left-radius: 12rpx;
			border-bottom-right-radius: 12rpx;
		}

		.img-box {
			margin-top: 12rpx;

			.img-left {
				width: 362rpx;
				height: 232rpx;
				background-color: #fd3c4a;
				border-top-left-radius: 24rpx;
				border-bottom-left-radius: 24rpx;
				overflow: hidden;
				position: relative;

				.title-text {
					position: absolute;
					left: 12rpx;
					bottom: 12rpx;
					color: #fff;
					z-index: 2;
				}
			}

			.img-right {
				margin-left: 12rpx;

				.top {
					width: 204rpx;
					height: 110rpx;
					background-color: #fd3c4a;
					margin-bottom: 8rpx;
					border-top-right-radius: 24rpx;
					position: relative;

					.title-text {
						position: absolute;
						left: 24rpx;
						bottom: 12rpx;
						color: #fff;
						z-index: 2;
					}
				}

				.bottom {
					width: 204rpx;
					height: 110rpx;
					background-color: #fd3c4a;
					border-bottom-right-radius: 24rpx;
					position: relative;

					.title-text {
						position: absolute;
						left: 24rpx;
						bottom: 12rpx;
						color: #fff;
						z-index: 2;
					}
				}
			}
		}

		.title-box {
			.left-box {
				padding: 2rpx;
				background-color: #e7ce97;
				height: 38rpx;
				line-height: 38rpx;
				border-top-left-radius: 12rpx;
				border-bottom-left-radius: 12rpx;
				position: relative;
				padding-left: 30rpx;

				.img {
					position: absolute;
					top: 4rpx;
					left: 2rpx;
				}
			}

			.right-box {
				padding: 2rpx 4rpx;
				background-color: #f4e5c1;
				display: inline-block;
				color: #302811;
				height: 38rpx;
				line-height: 38rpx;
				border-top-right-radius: 12rpx;
				border-bottom-right-radius: 12rpx;
			}

			.subtitle-box {
				background-color: #f9f4ea;
				font-size: 24rpx;
				color: #98835c;
				height: 38rpx;
				line-height: 38rpx;
				padding: 2rpx 4rpx;
				display: inline-block;
			}
		}

		.score {
			color: #e29c51;
			font-size: 24rpx;
			font-weight: bold;
		}

		.dec {
			width: 500rpx;
			margin: 0 auto;
			padding-top: 30rpx;
			word-wrap: break-word;
		}
	}
</style>